<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/public/layui/css/layui.css" media="all">
    <script src="/public/js/jquery.js"></script>
</head>

<body>
    <table class="layui-table">
        <% for(const item of list){ %>
        <tr>
            <td><%=item.id%></td>
            <td><img style="width: 100px; height: 100px;" src="<%=item.file%>" alt=""></td>
            <td><%=item.file%></td>
            <td><button onclick="del(<%=item.id%>)">delete</button></td>
        </tr>
        <% } %>
    </table>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="width:100px; height: 100px; display: none;">
            <p id="demoText"></p>
        </div>
    </div>

    <script src="/public/layui/layui.all.js" charset="utf-8"></script>
    <script>
        var upload = layui.upload;

        var uploadInst = upload.render({
            elem: '#test1',
            url: '/upload/',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    let demo1 = $('#demo1');
                    demo1.attr('src', result);
                    demo1.show();
                });
            },
            done: function (res) {
                console.log('res:', res);
                if (res.code > 0) {
                    return layer.msg('upload fail');
                }
                layer.msg('upload success', function () {
                    location.reload();
                });
            },
            error: function () {
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">upload fail</span> <a class="layui-btn layui-btn-xs demo-reload">retry</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        function del(id){
            layer.msg(id);
            $.post('/deleteCategoryCarousel', {id:id}, function(){
                location.reload();
            })
        }
    </script>
</body>

</html>